<template>
  <div>
    <child-nav-bar title="学习成果转换历史" 
    :queryParams="queryParams" 
    @handleQuery="handleQuery"
    >
      <template>
        <van-cell title="根据提交选择日期查询" :value="date" @click="show = true" />
        <van-calendar v-model="show" type="range" @confirm="onConfirm"  :min-date="minDate" :max-date="maxDate" />
      </template>
    </child-nav-bar>
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="(item, index) in  listData" :key="item.id">
        <template #title>
          <span>{{ item.s_number === undefined ? '' : '学号：' + item.s_number }}；</span>
          <span>申请状态：</span>
          <span v-if="item.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
          <span v-else-if="item.outcome == 1">审批中</span>
          <span v-else-if="item.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
        </template>
        <template>
          <van-list>
            <van-cell :title="'序号：' + (index + 1)" />
            <van-cell>
              <template #title> {{ item.s_number === undefined ? '' : '学号：' + item.s_number }} </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.describe === undefined ? '' : '描述：' + item.describe }} </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.subTime === undefined ? '' : '提交日期：' + item.subTime }} </template>
            </van-cell>
            <van-cell>
              <template #title>
                <span>审核日期：</span>
                <span v-if="item.reviewTime">{{ item.reviewTime }}</span>
                <span v-else style="color: #ccc;">暂无</span>
              </template>
            </van-cell>
            <van-cell>
              <template #title>
                <span>审核人：</span>
                <span v-if="item.t_number">{{ item.t_number }}</span>
                <span v-else style="color: #ccc;">暂无</span>
              </template>
            </van-cell>
            <van-cell>
              <template #title> {{ item.scores === undefined ? '' : '成果积分：' + item.scores }} </template>
            </van-cell>
            <van-cell>
              <template #title> <span>审核结果：</span>
                <span v-if="item.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
                <span v-else-if="item.outcome == 1">审批中</span>
                <span v-else-if="item.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
              </template>
            </van-cell>
          </van-list>
        </template>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
import { history, achievementTypeAll } from '@/api/student/achievementAPI'

export default {
  data() {
    return {
      activeNames: ['1'], //activeNames 为数组格式
      listData: [], // 成果转换历史表数据
      queryParams:{
        queryInput:undefined,
        queryItems:[],
        queryType:undefined
      },
      // 日期
      minDate: new Date(2010, 0, 1),  // 最小日期选择范围
      maxDate: new Date(), // 最大日期选择范围
      date: '', // 选中的日期
      show: false,
      time:[],
      typeData:[] // 类别列表
    }
  },
  computed: {
    // 个人信息
    user() {
      return this.$store.getters.info
    }
  },
  created() {
    this.getHistoryData();
  },
  methods: {
    // 获取 成果转换信息
    async getHistoryData() {
      const { data } = await history(this.user.username)
      // console.log(data);
      this.listData = data
      // 成果类别表数据
      const res = await achievementTypeAll()

      let arr = res.data.map( d =>{
        return{
          label:d.type_name,
          value:d.type_id
        }
      })

      // this.queryParams.queryItems = [
      //   {
      //     children:arr,
      //     label:"类别",
      //     value:"queryType"
      //   },
      //   {
      //     children:[],
      //     label:'专业',
      //     value:'zy'
      //   }
      // ]

      // this.typeData = res.data
      // console.log(res);
    },
    // 日期
    formatDate(date) {
      // return `${date.getMonth() + 1}/${date.getDate()}`;
      
      let start = date[0]
      let end = date[1]

      return [
        start.getFullYear() +'-' +( start.getMonth() + 1 ) + '-'+start.getDate(),
        end.getFullYear() + '-' + ( end.getMonth() + 1 ) + '-' +  end.getDate(),
      ]
    },
    onConfirm(date) {

      this.time = this.formatDate( date )

      this.show = false 
      // const [start, end] = date
      this.date = `${this.time[0]} / ${this.time[1]}`;
      // console.log( date )
      // const [start, end] = date;
      // this.show = false;
      // this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;

      // console.log("date：", this.date);
    },
    /**
     * 查询
    */
    async handleQuery(){

      let res = await history(this.user.username)

      let arr = res.data 

      // 先判断是否对时间进行查询
      if( this.time ){
       console.log(this.time)

        arr =  arr.filter(data => {
          const subTime = new Date(data.subTime);
          const startDate = new Date(this.time[0]);
          const endDate = new Date(this.time[1]);
          return subTime >= startDate && subTime <= endDate;
        });
      }

      if( this.queryParams.queryInput ){

        let newArr = []

        // 输入框处理方法
        // let keys = ['name','type']
        
        // arr.forEach(v => {
    
        //   for(let key in keys ){

        //     if( v[key].indexOf(this.queryParams.queryInput) >=0){
        //       newArr.push(v)
        //       break
        //     }
        //   }
        // })


        this.listData = newArr
      }
      else{
        console.log("arr", arr);
        this.listData = arr
      }

      this.date = undefined
      this.time = [] 
    }
  }
}
</script>
<style lang="less" scoped></style>